<template>
  <div class="orderList">
    <PageTitle title="订单信息"></PageTitle>
    <van-tabs
      v-model="navActive"
      color="#25c9c3"
      sticky
      class="topNav"
      animated
      swipeable
      @change="$router.replace('/order/list/' + navActive)"
      offset-top="1.49333rem"
    >
      <van-tab v-for="navIdx in 6" :key="'nav' + (navIdx - 1)">
        <template #title>
          <div class="title">{{ navList[navIdx - 1].title }}</div>
          <div class="num">
            {{ orderData ? orderData[navList[navIdx - 1].countType] : '-' }}
          </div>
        </template>
        <van-pull-refresh
          v-model="refreshing[navIdx - 1]"
          @refresh="onRefresh(navIdx - 1)"
          class="content"
        >
          <van-list
            v-model="loading[navIdx - 1]"
            :finished="finished[navIdx - 1]"
            finished-text="到底了"
            @load="loadMore(navIdx - 1)"
          >
            <div class="wrap">
              <OrderItem
                v-for="item in orderList[navIdx - 1]"
                :key="item.id"
                :order="item"
              ></OrderItem>
            </div>
            <van-empty
              v-if="orderList[navIdx - 1] && orderList[navIdx - 1].length == 0"
            />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle";
import OrderItem from "@/components/OrderItem";
import { mapMutations } from "vuex";
export default {
  name: "OrderList",
  data() {
    return {
      navList: [
        { title: "待付款", countType: "unpaid_count" },
        { title: "待发货", countType: "unshipped_count" },
        { title: "待收货", countType: "received_count" },
        { title: "待评价", countType: "evaluated_count" },
        { title: "已完成", countType: "complete_count" },
        { title: "售后/退款", countType: "refund_count" },
      ],
      page: [1, 1, 1, 1, 1],
      limit: 20,
      orderData: null,
      orderList: [],
      navActive: 0,
      loading: [false, false, false, false, false, false],
      finished: [false, false, false, false, false, false],
      refreshing: [false, false, false, false, false, false],
      getting: [false, false, false, false, false, false],
    };
  },
  props: ["orderType"],
  watch: {
    orderType() {
      this.changeNav();
    },
  },
  components: {
    PageTitle,
    OrderItem,
  },
  created() {
    this.changeNav();
  },
  methods: {
    ...mapMutations(["changeLoading"]),
    changeNav() {
      let num = parseInt(this.orderType);
      let type = (this.navActive = num >= 0 && num <= 5 ? num : 0);
      this.getOrderData();
      if (!this.orderList[type]) this.getOrderList({ type });
    },
    getOrderData() {
      this.$axios.get("/api/order/data").then((d) => {
        console.log("order/data", d.data);
        if (d.data.status == 200) {
          this.orderData = d.data.data;
        } else if (d.data.status == 410000) {
          this.$toast.fail("请重新登录");
          this.$store.commit("loginOut");
          this.$router.push("/login");
        }
      });
    },
    getOrderList({ loadMore, type }) {
      this.getting[type] = true;
      if (loadMore) {
        this.page[type]++;
      } else {
        this.page[type] = 1;
        this.finished[type] = false;
      }
      this.$axios
        .get("/api/order/list", {
          params: {
            page: this.page[type],
            limit: this.limit,
            type: type == 5 ? -3 : type,
          },
        })
        .then((d) => {
          this.getting[type] = false;
          console.log("order/list/" + type, this.page[type], d.data);
          if (this.refreshing[type]) this.refreshing[type] = false;
          if (this.loading[type]) this.loading[type] = false;

          if (d.data.status == 200) {
            if (loadMore) {
              this.$set(
                this.orderList,
                type,
                this.orderList[type].concat(d.data.data)
              );
            } else {
              this.$set(this.orderList, type, d.data.data);
            }
            if (d.data.data.length == 0) this.finished[type] = true;
          } else if (d.data.status == 410000) {
            this.$toast.fail("请重新登录");
            this.$store.commit("loginOut");
            this.$router.push("/login");
          }
        });
    },
    loadMore(type) {
      if (this.getting[type]) return;
      if (!this.orderList[type]) return;
      this.getOrderList({ loadMore: true, type });
    },
    onRefresh(type) {
      this.loading[type] = true;
      this.getOrderList({ type });
    },
  },
};
</script>

<style lang="less" scoped>
.orderList {
  .pageTitle {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
  }
  .topNav {
    margin-top: 50px;
    ::v-deep .van-sticky--fixed {
      top: 56px !important;
    }
    ::v-deep .van-tabs__wrap {
      height: 55px;
      text-align: center;
      .num {
        font-size: 12px;
      }
      .van-tab__text--ellipsis {
        display: block;
      }
    }
  }
  .content {
    min-height: calc(100vh - 111px);
  }
}
</style>